<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片：</td>
      <td>
        <img :src="p.imgUrl" width="100">
      </td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{p.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{p.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="item in p.friends">{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";
//准备一个空对象用于绑定
const p = ref({
  name:'',age:'',imgUrl:'',friends:[]
});

const loadData = ()=>{
  p.value = {
    name:'范传奇',
    age:18,
    imgUrl: 'fcq.jpg',
    friends: ['张三','李四','王五','赵六','老八']
  }
}
</script>


<style scoped>

</style>